<template>
  <div>
    <el-button type="primary" @click="exp">导出excel</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="proname" label="产品名称" width="240" />
      <el-table-column label="产品图片" width="130">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img1"
            :zoom-rate="1.2"
            :preview-src-list="[
              scope.row.img1,
              scope.row.img2,
              scope.row.img3,
              scope.row.img4,
            ]"
            fit="cover"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="category" label="产品分类" />
      <el-table-column prop="brand" label="产品品牌" />
      <el-table-column prop="originprice" label="产品价格" />
      <el-table-column prop="discount" label="产品折扣" />
      <el-table-column prop="stock" label="产品库存" />
    </el-table>
  </div>
</template>

<script>
import { proListApi } from "@/api/index.js";
import exportExcel from "@/utils/export.js";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  async mounted() {
    const res = await proListApi({
      count: 1,
      limitNum: 10,
    });
    console.log(res);
    this.tableData = res.data;
  },
  methods: {
    exp() {
      exportExcel({
        excelName: "产品列表",
        sheetName: "产品列表",
        data: this.tableData,
        sheetHeader: ["产品名称", "产品分类", "产品品牌", "产品价格"],
        sheetFilter: ["proname", "category", "brand", "originprice"],
        columnWidths: [30, 30, 30, 30],
      });
    },
  },
};
</script>
